<template>
  <com-page title="城投智充">
    <map></map>
    <view class="fix-footer">
      <view class="left" hover-class="transparent-bg" hover-stay-time="300" hover-start-time="0">
        <img class="icon" :src="LocationIcon" />
      </view>
      <view class="button-container">
        <view class="scan-btn" hover-class="transparent-bg" hover-stay-time="300" hover-start-time="0">扫码充电</view>
        <view class="charge-btn" hover-class="transparent-bg" hover-stay-time="300" hover-start-time="0">手动充电</view>
      </view>
      <view class="right" hover-class="transparent-bg" hover-stay-time="300" hover-start-time="0" @click="toHomePage">
        <!-- <img class="icon" :src="HomeIcon" /> -->
      </view>
    </view>
    <ComTabbar></ComTabbar>
  </com-page>
</template>

<script setup lang="ts">
import ComPage from "@/components/ComPage/index.vue";
import ComTabbar from "@/components/ComTabbar/index.vue";
import { LocationIcon } from "@/static";
import { navigateServices } from "@/utils/navigate";

const toHomePage = () => {
  navigateServices.to<{ id: string }>({
    url: "/pages/home/index",
    data: {
      id: '222',
    },
  });
};
</script>

<style scoped lang="less">
map {
  width: 100%;
  height: 100%;
}

.fix-footer {
  position: fixed;
  gap: 2vw;
  bottom: 5vh;
  width: 100%;
  padding: 0 4vw;
  display: flex;
  box-sizing: border-box;

  .left {
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(103, 103, 103, 0.1);
    border: 1px solid #ffffff;
    backdrop-filter: blur(3px);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13vw;
    height: 13vw;

    & .icon {
      width: 50%;
      height: 50%;
    }
  }

  .button-container {
    flex: 1;
    display: flex;
    gap: 1px;
    overflow: hidden;
    border-radius: 99px;
    width: 100%;
    color: #fff;

    .scan-btn {
      background: #01c07b;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
    }

    .charge-btn {
      background: #01c07b;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
    }
  }

  .right {
    background: #272d40;
    box-shadow: 0px 2px 8px 0px rgba(103, 103, 103, 0.1);
    border: 1px solid #ffffff;
    backdrop-filter: blur(3px);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13vw;
    height: 13vw;

    & .icon {
      width: 50%;
      height: 50%;
    }
  }
}
</style>
